import React, { useEffect, useState } from "react";
import { Row, Col, Spin } from 'antd';
import ChatPic from './components/ChatPic'
import ChatLine from './components/ChatLine'
import { request } from 'umi';

const infochats: React.FC = () => {


    const [listarr, setListarr] = useState<any>([]);
    const [linelist, setLinelist] = useState<any>([]);
    const [isSpin, setIsSpin] = useState(false);

    useEffect(() => {
        const getList = (async () => {
            setIsSpin(true);
            const res = await request('http://127.0.0.1:5000/api/TopSellingType/');
            const res2 = await request('http://127.0.0.1:5000/api/DecemberSales', {
                params: {
                    ThisYear: 2021,
                    LastYear: 2020,
                }
            });
            if (res.status === 200 && res2.status === 200) {

                let rows = res.data.row;
                let arr = rows.map((row: any) => {
                    let values = {
                        value: row.percent,
                        name: row.typeName
                    }
                    return values;

                })
                setLinelist(res2.data[0].data);
                setListarr(arr)
                setIsSpin(false);
            }
        })

        getList();

    }, [])

    return (
        <div className="infochats">
            <Row>
                <Col span={12}>
                    <Spin tip="loading...." spinning={isSpin} >
                        <ChatPic id={'mains'} listarr={listarr} />
                    </Spin>
                </Col>
                <Col span={12}>
                    <Spin tip="loading...." spinning={isSpin} >
                        <ChatLine id={'main2'} linelist={linelist} />
                    </Spin>
                </Col>
            </Row>
            <Row>
                <Col span={12}>
                    <Spin tip="loading...." spinning={isSpin} >
                        <ChatLine id={'main3'} linelist={linelist} />
                    </Spin>
                </Col>
                <Col span={12}>
                    <Spin tip="loading...." spinning={isSpin} >
                        <ChatPic id={'mains2'} listarr={listarr} />
                    </Spin>
                </Col>
            </Row>
        </div>
    )
}
export default infochats;